<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<!--将来new 的Vue实例，会控制这个 元素的所有内容-->
<!--Vue 实例所控制的这个元素区域，就是我们的  V-->
    <div id="dv">
        <!--渲染数据-->
        <!--使用v-cloak能够解决 插值表示式闪烁的问题-->
        <p v-cloak>+++++++++++{{msg}}-----------</p>
        <h4 v-text="msg">==========================</h4>
        <!--v-text 默认是没有闪烁问题的-->
        <!--v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己这个占位符，不会把整个元素都替换-->
        <div v-html="msg2"></div>


        <!--v-bind:是vue中，提供的用于绑定属性的指令  可以把mytitle当成变量-->
        <!--v-bind:  可以简写成 ：-->
        <!--<input type="button" value="按钮" v-bind:title="mytitle + '123'" >-->
        <input type="button" value="按钮" :title="mytitle + '123'" >
    </div>

<script src="lib/vue-2.4.0.js"></script>
    <script>
        //注意：我们 new 出来的这个 VM对象，就是我们MVVM中的  VM调度
        var vm = new Vue({
            el:"#dv", //当前我们new的这个vue实例  要控制页面上的那个区域
            //这里的data就是  MVVM 中的M 专门用来保存每个页面的数据的
            data:{//data 属性中，存放的是el中要用到的数据
                msg:'欢迎学习Vue',  //通过vue提供的指令，很方便的就能把数据渲染到页上
                msg2:'<h1>哈哈哈，我是大大的H1</h1>',
                mytitle:'这是自己定义的title'
            }
        })
    </script>
</body>
</html>